<template>
    <div class="body_input" :style="{ width: props.width, height: props.height }">
        <div class="main_input">
            <input :placeholder="props.placeholder" v-model="text" :value="text" @change=" 
        handleChenk(); $emit('textChange', text, state);" />
        </div>
        <el-button v-if="props.code" class="code" round @click="() => handleCode()" :disabled="codeState">{{ codeText
            }}</el-button>

    </div>

</template>

<script lang="ts" setup>
// style="border: 1px solid red;"
import { ref, watch } from 'vue'
const text = ref('')
const state = ref(false)
const codeState = ref(false)
const codeText = ref<string | number>('发送')
const emit = defineEmits(['getCode','textChange'])
const props = defineProps({
    placeholder: String,
    width: {
        type: String,
        default: '290px'
    },
    height: {
        type: String,
        default: '40px'
    },
    code: {
        type: Boolean,
        default: false
    },
    border: {
        type: String,
        default: 'none'
    },
    check: {
        type: String,
        default: 'text'
    },
    codeState: {
        type: Boolean,
        default: true
    },
    errorCode:{
        type:String,
        default: '请输入正确手机号'
    }
})
watch(codeState, () => {
    if (codeState.value) {
        let num = 15
        let timer: any = null
        codeText.value = num-- + '秒后重试'
        timer = setInterval(() => {
            codeText.value = num-- + '秒后重试'
            // console.log(codeText.value)
        }, 1000)

        setTimeout(() => {
            codeState.value = false
            clearInterval(timer)
            timer = null
            codeText.value = '发送'
        }, 15000)
    }
})
import { ElMessage } from 'element-plus'
import { tr } from 'element-plus/es/locale/index.mjs';
const phone_reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
const handleChenk = () => {
    switch (props.check) {
        case 'text': return
            break
        case 'phone':
            if (!phone_reg.test(text.value)) {
                ElMessage.error('格式错误，请输入正确手机号！')
                state.value = false
                return false
            } else {
                state.value = true
                return true
            }
            break;
        default:
            break;
    }


}

const handleCode = () => {
    if (props.codeState) {
        codeState.value = true;
        emit('getCode')
    }    else  ElMessage.error(props.errorCode)
    

}

</script>


<style scoped>
.body_input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #ccc; */
}

.main_input {
    flex: 1;
    border-bottom: 1px solid #ccc;
    padding: 8px;
    height: 100%;
    box-sizing: border-box;
}

.code {
    width: 100px;
    height: 40px;
    border: 1px solid #DDDDDD;
    text-align: center;
    line-height: 40px;
    border-radius: 30px;
    margin: 0px 10px;
    font-size: 14px;
}

.code:hover {
    border: 1px solid #54BAC9;
}

input {
    border: none;
    outline: none;
    font-size: 14px;
    width: 100%;
}

input::placeholder {
    color: #CCCCCC;
}
</style>